<script>
import {addStudents, getClass, getCollege, getStudentlist} from "../../api/studentsAPI/https";

export default ({
  name: "addPage",
  props: {
    formList: Object,
    getCollegeList: Array
  },
  watch: {
    formList: {
      handler(val) {
        // console.log(val)
        this.ruleForm = val
      }
    }
  },
  data() {
    return {
      collageValue:'',
      classValue:'',
      valueCollage:'',
      collageName:'',
      className:'',
      // 学院输入框的值
      collegeName: '',
      collegeQuery: {
        deptId: '',
        pageSize: 1000,
        pageNum: 1
      },
      getClassList: [],
      // getCollegeList: '',
      // 单选框
      sex: '',
      radio: '2',
      list: '',
      // 编辑参数  接口参数
      addData: {
        // 学院 班级参数
        collegeId:'',
        classId: '',
        college:'',
        className:'',
        id: '',
        name: '',
        gender: '',
        grade: '',
        stuNum: '',
        education: '',
        phoneNumber: '',
        enrollmentTime: '',
        anamnesis: '',
        experience: '',
        psychometricTest: '',
        familyInfo: '',
        medicationSituation: '',
        remark: '',
      },
      // 状态单选框
      valueState: 1,
      radioStyleState: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      // 性别单选框
      value: '',
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      // 表单
      ruleForm: {
        // 学院列表
        getCollegeList: [],
        gender: '',
        className: '',
        grade: '',
        college: '',
        name: '',
        phoneNumber: '',
        region: '',
        stuNum: '',
        enrollmentTime: '',
        anamnesis: '',
        experience: '',
        medicationSituation: '',
        psychometricTest: '',
        birthday: '',
        education: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        // 姓名
        name: [
          {required: true, message: '请输入学生姓名', trigger: 'blur'},
          {trigger: 'blur'}
        ],
        // 学院
        college: [
          {required: true, message: '请输入学院', trigger: 'blur'},
          {min: 3, max: 5, message: '', trigger: 'blur'}
        ],
        // 年级 班级  学号 学历 手机号 性别 状态 入学时间 出生日期
        // 年级
        grade: [
          {required: true, message: '请输入年级', trigger: 'blur'},
          {min: 3, max: 5, message: '', trigger: 'blur'}
        ],
        // 班级
        className: [
          {required: true, message: '请输入班级', trigger: 'blur'},
          {trigger: 'blur'}
        ],
        // 学号
        stuNum: [
          {required: true, message: '请输入学号', trigger: 'blur'},
          {trigger: 'blur'}
        ],
        // 学历
        education: [
          {required: true, message: '请选择学历', trigger: 'blur'},
          {message: '', trigger: 'blur'}
        ],
        // 手机号
        phoneNumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {message: '请输入正确手机号', trigger: 'blur'}
        ],
        // 性别
        gender: [
          {required: true, message: '请选择性别', trigger: 'blur'},
          {message: '', trigger: 'blur'}
        ],
        // 状态
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'},
          {message: '', trigger: 'blur'}
        ],

        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
        resource: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    // 添加班级
    changeClass(val) {
      console.log(val)
      this.classValue = val
    },
    // 学院 班级 列表
    collegeChange(val) {
      console.log(val)
      this.collegeQuery.deptId = val
      //获取班级列表
      getClass(this.collegeQuery).then(res => {
        this.getClassList = res.rows
        console.log(this.getClassList)
        // 获取下拉框的值
        this.getClassList.forEach(value => {
          if (val === value.deptId) {
            this.collegeName = value.college
          }
        })
      })
    },
    // 状态单选框
    onChangeState(e) {
      console.log('radio checked', e.target.value);
    },

    // 性别单选框
    onChange(e) {
      console.log('radio checked', e.target.value);
    },

    addinfo() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = '';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    // 表单 立即创建
    submitForm(formName, addData) {

      this.visible = false

      this.getCollegeList.forEach(item => {
        if (item.deptId===this.collegeQuery.deptId){
          this.collageName=item.deptName
        }
      })
      // console.log(this.getCollegeList)
      // console.log(this.getClassList)
      this.getClassList.forEach(item => {
        if (item.id===this.classValue){
          this.className=item.name
        }
      })
      // console.log(this.getClassList)
      //     this.addData.college = this.collegeName
      //     this.addData.name = this.className
      // 点击提交按钮 添加学生信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.addData)
          this.addData.stuNum = document.querySelector("#inputstuNum").value;
          this.addData.phoneNumber = document.querySelector("#inputphoneNumber").value;
          this.addData.name = document.querySelector("#inputName").value;
          // grade  inputGrade
          this.addData.grade = document.querySelector("#inputGrade").value;
          // 既往病史  三个限制字数输入框
          this.addData.anamnesis = document.querySelector("#inputAnamnesis").value;
          this.addData.experience = document.querySelector("#inputExperience").value;
          this.addData.medicationSituation = document.querySelector("#inputMedicationSituation").value;
          this.addData.createBy = document.querySelector("#inputCreateBy").value;
          // var value = $("#selectUser").val();
          this.addData.collegeId =   this.collegeQuery.deptId
          this.addData.classId =  this.classValue
          // 获取日期传参
          //  enrollmentTime 入学日期 enrollmentTimeVul
           this.addData.enrollmentTime= document.querySelector("#enrollmentTimeVul").value
          console.log(this.addData.enrollmentTime)
          // 获取下拉框的值
          this.dialogVisible = false
          // 将添加数组添加到总数组
          // this.addData.push(this.table)
          // 重新渲染列表  总列表
          getStudentlist().then(res => {
            this.table = res.rows
            this.total = res.total
            console.log(this.table)
          });
          // 接口
          // console.log(this.addData)
          addStudents(this.addData).then(res => {
            console.log(res)
          })
        } else {
          addStudents(this.addData).then(res => {
            this.dialogVisible = false
            console.log(res)
          })
        //   console.log(this.addData)
        //   console.log('error!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.visible = false
      this.$refs[formName].resetFields();
    }
  },
  created() {
    // 获取学院列表
    // getCollege().then(res => {
    //   this.getCollegeList = res.data
    // })
  }
})
</script>

<template>
  <div>
    <div>
      <el-button type="primary" @click="addinfo">
        添加
      </el-button>
      <a-modal
        style="width: 800px"
        title="添加学生"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
      >
        <!--添加学生弹出框内容-->
        <p style="padding: 0 30px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--学生姓名-->
                      <el-form-item label="学生姓名" prop="name">
                        <el-input v-model="ruleForm.name" id="inputName"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--学院-->
                      <el-form-item label="学院" clearable>
                        <el-select v-model="valueCollage" placeholder="请选择学院" @change="collegeChange(valueCollage)">
                          <el-option
                            v-for="item in getCollegeList"
                            :key="item.deptId"
                            :label="item.deptName"
                            :value="item.deptId">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!-- 第二行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--年级-->
                      <el-form-item label="年级" prop="grade">
                        <el-input v-model="ruleForm.grade" id="inputGrade"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--班级-->
                      <el-form-item label="班级" prop="className">
                        <el-select v-model="ruleForm.className" placeholder="请选择班级" @change="changeClass(ruleForm.className)">
                          <el-option
                            v-for="item in getClassList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!-- 第三行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--学号-->
                      <el-form-item label="学号" prop="stuNum">
                        <el-input v-model="ruleForm.stuNum" id="inputstuNum"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--学历-->
                      <el-form-item label="学历" prop="education">
                        <el-select v-model="ruleForm.education" placeholder="请选择学历">
                          <el-option label="研究生" value="研究生"></el-option>
                          <el-option label="本科生" value="本科生"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!--第四行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--手机号-->
                      <el-form-item label="手机号" prop="phoneNumber">
                        <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号"
                                  id="inputphoneNumber"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--性别-->
                      <el-form-item label="性别" prop="gender">
                        <a-radio-group v-model="ruleForm.gender" @change="onChange">
                          <el-radio v-model="ruleForm.gender" label="1">男性</el-radio>
                          <el-radio v-model="ruleForm.gender" label="2">女性</el-radio>
                        </a-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!-- 第五行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--状态-->
                      <el-form-item label="状态">
                        <a-radio-group v-model="ruleForm.status" @change="onChange">
                          <el-radio v-model="ruleForm.status" label="1">正常</el-radio>
                          <el-radio v-model="ruleForm.status" label="2">停用</el-radio>
                        </a-radio-group>
                      </el-form-item>
                    </div>
                  </el-col>

                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--入学时间-->
                      <el-form-item label="入学时间" required>
                        <el-col :span="11">
                          <el-form-item prop="enrollmentTime">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.enrollmentTime"
                                            style="width: 100%;" id="enrollmentTimeVul">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!--第六行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--出生日期-->
                      <el-form-item label="出生日期" required>
                        <el-col :span="11">
                          <el-form-item prop="birthday">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday"
                                            style="width: 100%;">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--既往病史-->
                      <el-form-item label="既往病史">
                        <el-input
                          type="textarea"
                          placeholder="请输入既往病史"
                          v-model="ruleForm.anamnesis"
                          maxlength="200"
                          show-word-limit
                          resize="none"
                          id="inputAnamnesis"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!--第七行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--心理诊断经历-->
                      <el-form-item label="心理诊断经历">
                        <el-input
                          type="textarea"
                          placeholder="请输入既往病史"
                          v-model="ruleForm.experience"
                          maxlength="200"
                          show-word-limit
                          resize="none"
                          id="inputExperience"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--服药情况-->
                      <el-form-item label="服药情况">
                        <el-input
                          type="textarea"
                          placeholder="请输入服药情况"
                          v-model="ruleForm.medicationSituation"
                          maxlength="200"
                          show-word-limit
                          resize="none"
                          id="inputMedicationSituation"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!--第八行-->
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <!--家庭情况-->
                      <el-form-item label="家庭情况">
                        <el-input
                          type="textarea"
                          placeholder="请输入家庭情况"
                          v-model="ruleForm.psychometricTest"
                          maxlength="200"
                          show-word-limit
                          resize="none"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <!--其他-->
                      <el-form-item label="其他">
                        <el-input
                          type="textarea"
                          placeholder="请输入其他"
                          v-model="ruleForm.createBy"
                          maxlength="200"
                          show-word-limit
                          resize="none"
                          id="inputCreateBy"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <!--点击按钮 提交修改  取消-->
            <el-form-item>
              <el-button @click="resetForm('ruleForm',addData)">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm',addData)">确定</el-button>
            </el-form-item>
          </el-form>
        </p>
      </a-modal>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .ant-modal-content {
  width: 800px;
}

::v-deep .el-button--default {
  margin-left: 200px;
}

::v-deep .el-col-11 {
  width: 100%;
}
</style>
